<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>所有应用</title>
		<link rel="stylesheet" type="text/css" href="css/Bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/Bootstrap/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style type="text/css">
			#app_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.index_head {
				padding-top: 25px;
				padding-left: 8px;
				padding-right: 8px;
			}
			/*----应用页头部----*/
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 9px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 6px;
				height: 100%;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding-top: 9px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
			}
			/*----新闻字体大小----*/
			
			.item div {
				font-size: 1.1em;
			}
			/*----mid部分----*/
			
			.app_mid_title {
				height: 25px;
				color: #999999;
				font-size: 1.15em;
				font-family: "黑体";
				font-weight: bold;
				padding: 0 6px;
				margin-left: 5px;
				margin-top: 0.5em;
				border-left: 5px solid #007AFF;
			}
			
			#indexGnBtn ul {
				display: table;
				width: 100%;
			}
			
			#indexGnBtn ul li p {
				color: #404040;
				font-family: "微软雅黑";
				/*border: 1px solid;*/
				text-align: center;
				font-size: 0.85em;
				position: relative;
				top: 3px;
			}
			
			#indexGnBtn img {
				width: 45%;
				position: relative;
				top: 3px;
			}
			/*----box区域----*/
			
			#indexGnBtn ul {
				display: table;
				margin-top: 8px;
				width: 100%;
			}
			
			#indexGnBtn ul li {
				float: left;
				border: 1px solid #eaeaea;
				width: 25%;
				display: table;
				padding-top: 5px;
				height: 100px;
			}
			
			#indexGnBtn ul li p {
				color: #404040;
				font-family: "微软雅黑";
				text-align: center;
				font-size: 0.85em;
			}
			
			#indexGnBtn img {
				width: 45%;
			}
			
			.yyBtn {
				display: block;
				height: 100%;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				/*border: 1px solid;*/
				/*box-shadow: 3px 3px 2px #999999;*/
			}
			
			.guanliTb {
				width: 60px;
				font-size: 1.5em;
				text-align: center;
				color: #FF0000;
				font-weight: bold;
				position: absolute;
				margin-left: -61px;
				margin-top: -10px;
				text-align: right;
				/*border: 2px crimson solid;*/
			}
			
			.guanliTb img {
				width: 100%;
				/*border: 1px solid;*/
			}
			
			.doudong {
				position: relative;
				-webkit-animation-name: buzz-out;
				-webkit-animation-duration: 0.75s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-iteration-count: 10000;
			}
			/*----抖动效果----*/
			
			@-webkit-keyframes buzz-out {
				10% {
					-webkit-transform: translateX(1.5px) rotate(1.5deg);
				}
				20% {
					-webkit-transform: translateX(-1.5px) rotate(-1.5deg);
				}
				30% {
					-webkit-transform: translateX(1.5px) rotate(1.5deg);
				}
				40% {
					-webkit-transform: translateX(-1.5px) rotate(-1.5deg);
				}
				50% {
					-webkit-transform: translateX(1.5px) rotate(1.5deg);
				}
				60% {
					-webkit-transform: translateX(-1px) rotate(-1deg);
				}
				70% {
					-webkit-transform: translateX(1px) rotate(1deg);
				}
				80% {
					-webkit-transform: translateX(-1px) rotate(-1deg);
				}
				90% {
					-webkit-transform: translateX(1px) rotate(1deg);
				}
				100% {
					-webkit-transform: translateX(-1px) rotate(-1deg);
				}
			}
			/*----提示框按钮颜色设置为APP主流颜色----*/
			
			.primary {
				color: #0070B4 !important;
				font-weight: bold !important;
			}
			
			#app_mid {
				padding-top: 70px;
			}
			
			.redIcon {
				color: #F43530;
				font-size: 20px;
			}
			
			#changing_page_area label {
				font-size: 16px !important;
			}
			
			.changing_page_title {
				border: 1px solid;
				padding: 10px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="app_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;首页</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">所有应用</p>
				</div>
				<div class="app_head_right">
					<!--<a href="javascript:;" onclick="delt()">删</a>-->
					<!--<a id="changeBtn" href="javascript:;">管理</a>-->
					<a id="finishBtn" href="javascript:;" style="display: none;">完成</a>
				</div>

			</div>
			<div id="app_mid">
				<div id="indexGnBtn">
					<p class="app_mid_title">长途交通</p>
					<ul id="type1_ul">
						<!--在JS中DOM添加ul中各个节点-->
					</ul>
					<p class="app_mid_title">市内交通</p>
					<ul id="type2_ul">
						<!--在JS中DOM添加ul中各个节点-->
					</ul>
					<p class="app_mid_title">便民查询</p>
					<ul id="type3_ul">
						<!--在JS中DOM添加ul中各个节点-->
					</ul>
					<p class="app_mid_title">服务监督</p>
					<ul id="type4_ul">
						<!--在JS中DOM添加ul中各个节点-->
					</ul>
				</div>
				<!--<div id="changing_page_area">
					<div class="changing_page_title">
						<span class="iconfont redIcon">&#xe6ff;</span>
						<label class="redIcon">可将常用的功能放置在首页</label>
					</div>
				</div>-->
			</div>

		</div>
		<script src="js/returnBtn.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Bootstrap_js/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swipe_hzs.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/appList.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var k;
			var changyong = [];
			var beiyong = [];
			var addstr = '<img src="iconfont/yinliangadd.png"'; //适配苹果判断条件所用
			var substr = '<img src="iconfont/yinliangjian.png"'; //适配苹果判断条件所用
			var add = '<img src="iconfont/yinliangadd.png">';
			var sub = '<img src="iconfont/yinliangjian.png">';
			$(function() {
				//页面加载时展示所有应用 若未登录展示默认顺序19个应用若已登录 读取展示数据
				//				if(!localStorage.userJson) {
				//未登录时
				appendAllApp();
				//				} else {
				//登录状态下
				//					readData();
				//				}
			});

			function appendAllApp() {
				if(localStorage.userJson) {
					//登录状态下
					var hyn = JSON.parse(localStorage.userJson)[0].HYNYH;
					console.log(hyn);
					if(hyn == 2) {
						var bsdw = JSON.parse(localStorage.userJson)[0].bsdw; //报送单位001 高管局  002 吉高集团  003  公路局
						if(bsdw == "001" || bsdw == "002") { //吉高集团
							//行业内用户增加高速报送模块
							var gsbs = {
								src: "img/index/app_gsbs.png",
								name: "高速报送",
								id: 17,
								href: "moreHtml/subway_bs.html",
								type: 1
							};
							appList.push(gsbs);
							console.log(appList);
						} else if(bsdw == "003") { //高管局
							var gsbs = {
								src: "img/index/glbs_blueIcon.png",
								name: "公路报送",
								id: 18,
								href: "moreHtml/subway_bs003.html",
								type: 1
							};
							appList.push(gsbs);
							console.log(appList);
						}

					} else if(hyn == "3") {
						//行业内用户增加高速报送模块
						var gsbs = {
							src: "img/indexIcon/dataCheckIcon.png",
							name: "数据核查",
							id: 18,
							href: "moreHtml/data_check.html",
							type: 1
						};
						appList.push(gsbs);
					}
				}
				//添加全部19个应用模块节点
				for(var i = 0; i < appList.length; i++) {
					var types = appList[i].type;
					if(types == 1) {
						var li = $('<li></li>');
						$("#indexGnBtn #type1_ul").append(li);
						var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
						$(li).append(a);
						var div = $('<div><img src="' + appList[i].src + '" /></div>');
						var p = $('<p>' + appList[i].name + '</p>');
						$(a).append(div, p);
					} else if(types == 2) {
						var li = $('<li></li>');
						$("#indexGnBtn #type2_ul").append(li);
						var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
						$(li).append(a);
						var div = $('<div><img src="' + appList[i].src + '" /></div>');
						var p = $('<p>' + appList[i].name + '</p>');
						$(a).append(div, p);
					} else if(types == 3) {
						var li = $('<li></li>');
						$("#indexGnBtn #type3_ul").append(li);
						var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
						$(li).append(a);
						var div = $('<div><img src="' + appList[i].src + '" /></div>');
						var p = $('<p>' + appList[i].name + '</p>');
						$(a).append(div, p);
					} else if(types == 4) {
						var li = $('<li></li>');
						$("#indexGnBtn #type4_ul").append(li);
						var a = $('<a href="' + appList[i].href + '" class="yyBtn" name="' + appList[i].id + '"></a>');
						$(li).append(a);
						var div = $('<div><img src="' + appList[i].src + '" /></div>');
						var p = $('<p>' + appList[i].name + '</p>');
						$(a).append(div, p);
					}
				}
			}

			function appendOftenApp() {
				for(var i = 0; i < changyong.length; i++) {
					var li = $('<li></li>');
					$("#indexGnBtn ul").append(li);
					var a = $('<a href="' + changyong[i].href + '" class="yyBtn" name="' + changyong[i].id + '"></a>');
					$(li).append(a);
					var div = $('<div><img src="' + changyong[i].src + '" /></div>');
					var p = $('<p>' + changyong[i].name + '</p>');
					$(a).append(div, p);
				}
			}

			function appendSpareApp() {
				for(var i = 0; i < beiyong.length; i++) {
					var li = $('<li></li>');
					$("#indexGnBtn ul").append(li);
					var a = $('<a href="' + beiyong[i].href + '" class="yyBtn" name="' + beiyong[i].id + '"></a>');
					$(li).append(a);
					var div = $('<div><img src="' + beiyong[i].src + '" /></div>');
					var p = $('<p>' + beiyong[i].name + '</p>');
					$(a).append(div, p);
				}
			}

			function storageData() {
				//存储数据后台接口方法
				var userName = JSON.parse(localStorage.userJson)[0].username;
				//				console.log(userName);
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "application",
						"USERNAME": userName,
						"COMMON": JSON.stringify(changyong),
						"SPARE": JSON.stringify(beiyong)
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						alert("失败");
					}
				});
			}

			function readData() {
				//读取数据后台接口方法
				var userName = JSON.parse(localStorage.userJson)[0].username;
				//				console.log(userName);
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "application_info",
						"USERNAME": userName
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data.DATA);
						if(data.DATA == "[]") {
							kk = 11;
							appendAllApp();
						} else {
							//							k = changyong.length;
							changyong = JSON.parse(eval(data.DATA)[0].COMMON);
							beiyong = JSON.parse(eval(data.DATA)[0].SPARE);
							appendOftenApp();
							appendSpareApp();
						}
					},
					error: function(data) {
						alert("失败");
					}
				});
			}

			function beginChange() {
				$("#indexGnBtn").hide(); //隐藏原有页面
				//点击管理添加加减号图标及抖动效果
				var userName = JSON.parse(localStorage.userJson)[0].username;
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "application_info",
						"USERNAME": userName
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data.DATA);
						if(data.DATA == "[]") {
							for(var i = 0; i < 11; i++) {
								var subBtn = '<a href="javascript:;" class="guanliTb" onclick="guanli(this)">' + sub + '</a>';
								var liRongqi_red = $("#indexGnBtn ul li")[i];
								$(liRongqi_red).append(subBtn);
							}
							for(var j = 11; j < appList.length; j++) {
								var addBtn = '<a href="javascript:;" class="guanliTb" onclick="guanli(this)">' + add + '</a>';
								var liRongqi_green = $("#indexGnBtn ul li")[j];
								$(liRongqi_green).append(addBtn);
							}
						} else {
							changyong = JSON.parse(eval(data.DATA)[0].COMMON);
							beiyong = JSON.parse(eval(data.DATA)[0].SPARE);
							//							alert(beiyong.length);
							kk = changyong.length;
							//							console.log(kk);
							for(var i = 0; i < kk; i++) {
								var subBtn = '<a href="javascript:;" class="guanliTb" onclick="guanli(this)">' + sub + '</a>';
								var liRongqi_red = $("#indexGnBtn ul li")[i];
								$(liRongqi_red).append(subBtn);
							}
							for(var j = kk; j < appList.length; j++) {
								var addBtn = '<a href="javascript:;" class="guanliTb" onclick="guanli(this)">' + add + '</a>';
								var liRongqi_green = $("#indexGnBtn ul li")[j];
								$(liRongqi_green).append(addBtn);
							}
						}
						//添加抖动效果
						$("#indexGnBtn ul li").addClass("doudong");
					},
					error: function(data) {
						alert("失败");
					}
				});
			}

			$("#changeBtn").click(function() {
				if(!localStorage.userJson) {
					//未登录状态下需先登录再进行应用管理设置  ..跳转至登录页面
					$.confirm("请先登录", function() {
						//点击确认后的回调函数
						window.location.href = "Login.html";
					}, function() {
						//点击取消后的回调函数
					});
				} else {
					//登录状态下
					//点击管理按钮触发事件
					$(this).hide(); //管理按钮隐藏
					$("#finishBtn").show(); //完成按钮显示
					beginChange();
				}
				//屏蔽每个按钮模块的跳转功能
				//				var btn = document.getElementsByClassName("yyBtn");
				//				for (var i = 0; i < appList.length; i++) {
				//					var btnHref = btn[i].setAttribute("href","javascript:;");
				//				}
				$(".yyBtn").attr("href", "javascript:;");
			});
			$("#finishBtn").click(function() {
				var zsBtn = $(".guanliTb");
				changyong = [];
				beiyong = [];
				for(var i = 0; i < zsBtn.length; i++) {
					if(zsBtn[i].innerHTML.indexOf(substr) != -1) {
						var oftenIndex = zsBtn[i].previousElementSibling.name;
						changyong.push(appList[oftenIndex]);
					} else {
						var spareIndex = zsBtn[i].previousElementSibling.name;
						beiyong.push(appList[spareIndex]);
					}
				}
				//				alert(JSON.stringify(changyong));
				//				alert(JSON.stringify(beiyong));
				storageData();
				$("#indexGnBtn ul").html(""); //清空ul内部所有li
				appendOftenApp();
				appendSpareApp();
				$(".guanliTb").remove(); //去除加减小图标
				$("#indexGnBtn ul li").removeClass("doudong"); //去除抖动效果
				$(this).hide(); //完成按钮隐藏
				$(this).prev().show(); //管理按钮显示
			});

			function guanli(t) {
				if(t.innerHTML.indexOf(addstr) != -1) {
					kk++;
					if(kk > 11) {
						$.alert("常用应用首页最多可摆放11个哦", "温馨提示");
						kk--;
					} else {
						t.innerHTML = sub;
					}
				} else if(t.innerHTML.indexOf(substr) != -1) {
					kk--;
					if(kk < 3) {
						$.alert("亲！至少留三个您常用的应用吧", "温馨提示");
						kk++;
					} else {
						t.innerHTML = add;
					}
				}
				//								alert(kk);
			}
		</script>
	</body>

</html>